<template>
    <view>
        <up-index-list>
            <template v-for="(item, key, index) in carData">
                <up-index-item>
                    <up-index-anchor :text="key"></up-index-anchor>
                    <view class="flex items-center p-[15rpx]" v-for="(cell, i) in item" :key="cell?.brand_name"
                        @click="getSeriesList(cell.id, cell?.brand_name)">
                        <image :src="cell?.brand_logo" class="w-[75rpx] rounded-[50%] h-[75rpx]"></image>
                        <text class="ml-[20rpx]">{{ cell?.brand_name }}</text>
                    </view>
                </up-index-item>
            </template>
        </up-index-list>
    </view>
    <!-- 车系弹出层 -->
    <up-popup zIndex="999" :show="show" mode="right" title="车系列表" bgColor="#fff" @close="close" @open="open">
        <view class="w-[600rpx] flex flex-col h-[100vh]">
            <view class="h-[100rpx] leading-[100rpx] text-[32rpx] font-[600] text-center">
                车系列表
            </view>
            <scroll-view scroll-y class="flex-1 w-[100%] mb-[50rpx] h-[calc(100%-100rpx)]">
                <template v-if="Object.keys(seriesList).length > 0">
                    <view v-for="(item, key) in seriesList" :key="key">
                        <view class="top_text_bg text-[#7d7d7d] p-[20rpx] text-[28rpx]">{{ key }}</view>
                        <view v-for="items in item" :key="items.id" class="p-[20rpx] text-[28rpx]"
                            @click="getModelsList(items.id, items.name)"
                            :class="{ 'active-item': modelsId === items.id }">
                            {{ items.name }}
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="w-[100%] pt-[100rpx] text-center text-[#7d7d7d] text-[28rpx]">
                        暂无数据哦~
                    </view>
                </template>
            </scroll-view>
        </view>
    </up-popup>
    <up-popup :show="show2" zIndex="1001" mode="right" bgColor="#fff" @close="close2" @open="open2">
        <view class="w-[500rpx] flex flex-col h-[100vh]">
            <view class="h-[100rpx] leading-[100rpx] text-[32rpx] font-[600] text-center">
                {{ title }}
            </view>
            <scroll-view scroll-y class="flex-1 w-[100%] mb-[50rpx] h-[calc(100%-100rpx)]">
                <template v-if="Object.keys(modelsList).length > 0">
                    <!-- <view v-for="(item, key, index) in modelsList" :key="key + index">
                        <view class="top_text_bg text-[#7d7d7d] p-[20rpx] text-[28rpx]">{{ key }}</view>
                        <view @click="" v-for="items in item" :key="key + items.name"
                            class="p-[20rpx] flex flex-col text-[28rpx]">
                            <text>{{ items.name }}</text>
                            <text class="text-[21rpx] mt-[8rpx] text-[#999]">{{ items.peizhi }}</text>
                        </view>
                    </view> -->
                    <up-collapse accordion>
                        <up-collapse-item :border="false" :cellCustomStyle="{
                            padding: '20rpx',
                        }" cellCustomClass="top_text_bg"
                            v-for="(item, index) in Object.keys(modelsList).sort((a, b) => b - a)" :key="item + index"
                            :title="item">
                            <view @click="getCarInfo(items)" v-for="items in modelsList[item]" :key="item + items.name"
                                class="p-[20rpx] text-[28rpx] flex flex-col">
                                <text>{{ items.name }}</text>
                                <text class="text-[21rpx] mt-[8rpx] text-[#999]">{{ items.peizhi }}</text>
                            </view>
                        </up-collapse-item>
                    </up-collapse>
                </template>
                <template v-else>
                    <view class="w-[100%] pt-[100rpx] text-center text-[#7d7d7d] text-[28rpx]">
                        暂无数据哦~
                    </view>
                </template>
            </scroll-view>
        </view>
    </up-popup>
</template>
<script setup>
import { ref, computed, } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { uploadImage } from '@/api/app';
import { carBrandList, carList, carModelsList } from '@/api/whoable';
// 车系
const show = ref(false);
const open = () => {
    show.value = true;
};
const close = () => {
    show.value = false;
}
const seriesList = ref({});
const carInfo = ref({
    brand: '',
    series: '',
    models: ''
})
const getSeriesList = async (id, name) => {
    try {
        uni.showLoading({
            title: '获取数据中,请稍后...',
            mask: true
        });
        carInfo.value.brand = name;
        carInfo.value.series = '';
        carInfo.value.models = '';
        const { msg } = await carList({
            brandid: id
        });
        if (typeof msg == 'string' && msg.length > 0) {
            const data = JSON.parse(msg);
            if (Array.isArray(data?.result)) {
                const obj = {};
                data?.result.forEach(item => {
                    if (item.sname) {
                        if (obj[item.sname]) {
                            obj[item.sname].push(item)
                        } else {
                            obj[item.sname] = [item]
                        }
                    }
                });
                seriesList.value = obj;
                console.log(obj);
                open();
            } else {
                uni.$u.toast('暂无数据哦~');
            }
        } else {
            uni.$u.toast('获取数据失败!');
        }
    } catch (error) {
        uni.hideLoading();
        uni.$u.toast('获取数据失败!'); ``
    } finally {
        uni.hideLoading();
    }
};

// 车型
const show2 = ref(false);
const open2 = () => {
    show2.value = true;
};
const close2 = () => {
    show2.value = false;
}
const modelsList = ref({});
const title = ref('');
const modelsId = ref('');
const getModelsList = async (id, name) => {
    try {
        title.value = name;
        modelsId.value = id;
        carInfo.value.series = name;
        carInfo.value.models = '';
        uni.showLoading({
            title: '获取数据中,请稍后...',
            mask: true
        });
        const { msg } = await carModelsList({
            series_id: id
        });
        if (typeof msg == 'string' && msg.length > 0) {
            const data = JSON.parse(msg);
            if (Array.isArray(data?.result)) {
                const obj = {};
                data?.result.reverse().forEach(item => {
                    if (item.year) {
                        if (obj[item.year]) {
                            obj[item.year].push(item)
                        } else {
                            obj[item.year] = [item]
                        }
                    }
                });
                modelsList.value = obj;
                console.log(modelsList.value);
                open2();
            } else {
                uni.$u.toast('暂无数据哦~');
            }
        } else {
            uni.$u.toast('获取数据失败!');
        }
    } catch (error) {
        uni.hideLoading();
        uni.$u.toast('获取数据失败!');
    } finally {
        uni.hideLoading();
    }
};
const getCarInfo = (item) => {
    console.log('获取车系信息');
    carInfo.value.models = item.name;
    uni.$emit('getCarInfo', carInfo.value);
    uni.navigateBack();
};
// 跳转
const push = (path) => {
    uni.navigateTo({
        url: path
    });
};
const carData = ref({});
const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
onLoad(async () => {
    const { msg } = await carBrandList({});
    if (typeof msg == 'string' && msg.length > 0) {
        const data = JSON.parse(msg);
        if (Array.isArray(data?.result)) {
            const arr = {};
            data?.result.forEach(item => {
                if (item.first_letter) {
                    if (arr[item.first_letter]) {
                        arr[item.first_letter].push(item)
                    } else {
                        arr[item.first_letter] = [item]
                    }
                }
            });
            console.log(arr);
            carData.value = arr;
        } else {
            if (data.reason) {
                uni.$u.toast(data.reason);
            } else {
                uni.$u.toast('获取数据失败!');
            }
        }
    }
})
</script>
<style lang="scss" scoped>
:deep(.u-index-list__letter) {
    top: 600rpx !important;
}

.active-item {
    color: #da6a1e;
    background: rgba(218, 106, 30, .4)
}

.top_text_bg {
    background: rgb(237, 240, 255);
    background: linear-gradient(90deg, rgba(237, 240, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);
}
</style>